<template>
    <BaseExercise :title="title">
        <template #question>
            <slot></slot>
        </template>

        <template #answer>
            <div class="w-full">
                <div
                    v-for="(o, i) of exercise.options"
                    class="bg-gray-1 @hover:bg-gray-2 rounded mb last:mb-0 px-4 py-2 select-none transition cursor-pointer animated"
                    :class="
                        isCorrect(i)
                            ? 'bg-green-3 @hover:bg-green-4 ' +
                              (exercise.result == i && playAnimation
                                  ? ' ad-500 animated-pulse'
                                  : '')
                            : isError(i)
                            ? 'bg-red-4 @hover:bg-red-5 ' +
                              (exercise.result == i && playAnimation
                                  ? ' animated-head-shake'
                                  : '')
                            : ''
                    "
                    @click="handleChoice(i)"
                >
                    {{ i + 1 + ". " + o }}
                </div>
            </div>
        </template>
    </BaseExercise>
</template>

<script setup lang="ts">
    import BaseExercise from "./BaseExercise.vue"
    import { useTimekeeping } from "../../utils"
    import { onMounted, onUnmounted, ref, watch } from "vue"
    const props = defineProps<{
        title: string
        actived: boolean
        exercise: {
            options: string[]
            correctOption: number
            timekeeping?: number
            result?: number
            resultCorrect?: boolean
        }
    }>()

    // 仅在用户第一次进行选择时播放动画
    const playAnimation = ref(false)
    watch(
        () => props.exercise,
        () => {
            playAnimation.value = false
        }
    )

    function isCorrect(index: number) {
        if (
            props.exercise.resultCorrect != undefined &&
            index == props.exercise.correctOption
        ) {
            return true
        } else {
            return false
        }
    }

    function isError(index: number) {
        const { result, correctOption } = props.exercise
        if (index == result && index != correctOption) {
            return true
        } else {
            return false
        }
    }

    const timekeeping = useTimekeeping()

    onMounted(() => {
        document.addEventListener("keyup", handleKeyup)
    })
    onUnmounted(() => {
        document.removeEventListener("keyup", handleKeyup)
    })

    function handleKeyup(e: KeyboardEvent) {
        if (!props.actived) {
            return
        }
        const keyMap = {
            "0": 0,
            "1": 1,
            "2": 2,
            "3": 3,
            "4": 4,
            "5": 5,
            "6": 6,
            "7": 7,
            "8": 8,
            "9": 9,
        }
        const choice = keyMap[e.key as keyof typeof keyMap]
        if (choice != undefined) {
            handleChoice(choice - 1)
        }
    }

    function handleChoice(i: number) {
        if (props.exercise.result != undefined) {
            return
        }
        playAnimation.value = true
        props.exercise.timekeeping = timekeeping.value
        props.exercise.result = i
        props.exercise.resultCorrect = i == props.exercise.correctOption
    }
</script>
